let urlEle = window.location.href
let index = urlEle.indexOf('=')
let id = urlEle.substring(index + 1)



// 调用根据ID查询商品接口
function getProduct(id) {
    myAjaxPromise({
        url: 'http://api.yuguoxy.com/api/shop/find',
        method: 'GET',
        data: {
            id
        }
    }).then(res => {
        if (res.resultCode == 1) {
            let product = res.resultInfo
            loadProduct(product)
        }
    }).catch(err => {
        console.log(err);
    })
}

//渲染界面
function loadProduct(product) {
    let imgs = product.list

    let imgOne = document.createElement('img')
    imgOne.setAttribute('src', product.picture)

    let imgTow = imgOne.cloneNode(false)
    document.querySelector('.show-box').insertBefore(imgOne, document.querySelector('.mask'))

    document.querySelector('.glass-right').appendChild(imgTow)
    let str = `
  
    <h3>${product.product}</h3>
    <p>价格&emsp;<span>￥${product.price}</span></p>

    <hr>
    <p class="details">详情：${product.shop}</p>
    <div class="buy">立即购买</div>
    <div class="add-cart">加入购物车</div>
`
    document.querySelector('#right').innerHTML = str
    let liAll = ''
    imgs.forEach(item => {

        let liStr = `<li><img src="${item}"></li>`
        liAll += liStr
    });
    document.querySelector('ul').innerHTML = liAll

    glassAll()
    addCart(product)
}
// 放大镜
function glassAll() {
    let showboxEle = document.querySelector('.show-box')
    let maskEle = document.querySelector('.mask')
    let glassBox = document.querySelector('.glass-right') //放大镜盒子
    let bigImg = document.querySelector('.glass-right>img') //背景图片
    let liEle = document.querySelectorAll('ul>li')
    let showImg = document.querySelector('.show-box>img')

    function glass() {
        showboxEle.addEventListener('mousemove', function (e) {
            e = e || window.event

            // 鼠标移入放大镜盒子显示
            glassBox.style.display = 'block'
            maskEle.style.display = 'block'

            // 光标在mask上居中
            let x = e.offsetX - maskEle.offsetWidth / 2
            let y = e.offsetY - maskEle.offsetHeight / 2

            // 判断边界
            if (x < 0) {
                x = 0
            }
            if (x > showboxEle.offsetWidth - maskEle.offsetWidth) {
                x = showboxEle.offsetWidth - maskEle.offsetWidth
            }
            if (y < 0) {
                y = 0
            }
            if (y > showboxEle.offsetHeight - maskEle.offsetHeight) {
                y = showboxEle.offsetHeight - maskEle.offsetHeight
            }

            maskEle.style.left = x + 'px'
            maskEle.style.top = y + 'px'

            let maskWidth = parseInt(window.getComputedStyle(maskEle).width)
            let maskHeight = parseInt(window.getComputedStyle(maskEle).height)
            let glassBoxWidth = parseInt(window.getComputedStyle(glassBox).width)
            let glassBoxHeight = parseInt(window.getComputedStyle(glassBox).height)
            let moveX = x * glassBoxWidth / maskWidth
            let moveY = y * glassBoxHeight / maskHeight

            //移动背景图片
            bigImg.style.left = -moveX + 'px'
            bigImg.style.top = -moveY + 'px'

        })
        // 鼠标移出放大镜盒子隐藏
        showboxEle.addEventListener('mouseout', function () {
            glassBox.style.display = 'none'
            maskEle.style.display = 'none'
        })
    }

    // 计算缩放比例
    function onScale() {
        let glassBoxWidth = parseInt(window.getComputedStyle(glassBox).width)
        let glassBoxHeight = parseInt(window.getComputedStyle(glassBox).height)

        let showBoxWidth = parseInt(window.getComputedStyle(showboxEle).width)
        let showBoxHeight = parseInt(window.getComputedStyle(showboxEle).height)

        let maskWidth = parseInt(window.getComputedStyle(maskEle).width)
        let maskHeight = parseInt(window.getComputedStyle(maskEle).height)

        let w = glassBoxWidth * showBoxWidth / maskWidth
        let h = glassBoxHeight * showBoxHeight / maskHeight

        bigImg.style.width = w + 'px'
        bigImg.style.height = h + 'px'
    }
    // tab切换
    function onTab() {
        for (let i = 0; i < liEle.length; i++) {
            liEle[i].addEventListener('mouseover', function () {
                onClear()
                this.classList.add('active')
                console.log();
                let imgSrc = liEle[i].querySelector('img').getAttribute('src')
                showImg.setAttribute('src', imgSrc)
                bigImg.setAttribute('src', imgSrc)
            })
        }
    }
    // 清除原有的active样式
    function onClear() {
        for (let i = 0; i < liEle.length; i++) {
            liEle[i].classList.remove('active')
        }
    }
    glass()
    onScale()
    onTab()
}



// 加入购物车
function addCart(product) {

    let addBtn = document.querySelector('.add-cart')
    addBtn.addEventListener('click', function () {
        products = {
            ...product,
            num: 1,
            state: false
        }

        let productInfo = localStorage.getItem('PRODUCT') || []

        if (typeof productInfo == 'object') {
            productInfo.push(products)
            localStorage.setItem('PRODUCT', JSON.stringify(productInfo))
        } else {
            productInfo = JSON.parse(productInfo)
            let p = productInfo.find(function (item) {
                return item.id == products.id
            })
            if (p) {
                p.num++
            } else {
                productInfo.push(products)
            }
            localStorage.setItem('PRODUCT', JSON.stringify(productInfo))
        }

        location.href = './shoppingcart.html'
    })
}
getProduct(id)